<template>
	<div class="tags" v-if="showTags">
		<div class="tags-item">
			<div class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
				<router-link :to="item.fullPath" class="tags-li-title text-xs text-cut">
					{{item.title}}
				</router-link>
				<i class="el-icon-close text-bold" @click="closeTags(index)"></i>
			</div>
		</div>
		<div class="pos text-xs">
			<i class="el-icon-s-home text-888 text-xs"></i>
			<span> 当前位置：</span>
			<router-link v-if="Level1.name" class="text-blue" :to="Level1.path">
				{{Level1.name}} > </router-link>
			<a>{{$route.meta.title}}</a>
		</div>
	</div>
</template>

<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				tagsList: [],
				Level1: {
					name: '',
					path: ''
				},
			}
		},
		methods: {
			isActive(path) {
				return path === this.$route.path;
			},
			// 关闭单个标签
			closeTags(index) {
				const delItem = this.tagsList.splice(index, 1)[0];
				const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
				if (item) {
					delItem.path === this.$route.fullPath && this.$router.push(item.path);
				} else {
					this.$router.push('/');
				}
				localStorage.setItem('tags', JSON.stringify(this.tagsList));
			},
			// 设置标签
			setTags(route) {
				let tags = localStorage.getItem('tags');
				if (JSON.parse(tags) != null) {
					this.tagsList = JSON.parse(tags)
				}
				const isExist = this.tagsList.some(item => {
					return item.path === route.path;
				})
				if (!isExist) {
					if (this.tagsList.length >= 8) {
						this.tagsList.shift();
					}
					this.tagsList.push({
						fullPath:route.fullPath,
						title: route.meta.title,
						path: route.path,
						name: route.matched[1].components.default.name
					})
				}
				bus.$emit('tags', this.tagsList);
				localStorage.setItem('tags', JSON.stringify(this.tagsList));
				
			},
			handleTags(command) {
				command === 'other' ? this.closeOther() : this.closeAll();
			},
			//设置面包屑导航
			setBreadCrumbs(newValue) {
				let items = localStorage.getItem('menuList');
				items = JSON.parse(items)
				let path = this.getParam()
				if (items != null) {
					items.forEach(item => {
						if (item.index == this.getParam()) {
							this.Level1={
								name:item.title,
								path:"/"+item.index
							}
						} else {
							if (path.indexOf("_") != -1) {
								path = path.split('_')
								if (item.index == path[1]) {
									this.Level1={
										name:item.title,
										path:"/"+item.index
									}
								}
							}
						}
					})
				}
			},
			getParam() {
				let url = window.location.href
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = url.split('#')[1].substr(1)
				return r;
			},
		},
		computed: {
			showTags() {
				return this.tagsList.length > 0;
			}
		},
		watch: {
			$route(newValue, oldValue) {
				let items = localStorage.getItem('menuList');
				localStorage.removeItem('subs')
				this.$store.commit("topNav", []);
				items = JSON.parse(items)
				items.forEach(item => {
					let path = this.getParam()
					if (item.index == path) {
						if (item.children) {
							this.$store.commit("topNav", item.children);
							localStorage.setItem('subs', JSON.stringify(item.children));
						}
					} else {
						if (path.indexOf("_") != -1) {
							path = path.split('_')
							if (item.index == path[1]) {
								if (item.children) {
									this.$store.commit("topNav", item.children);
									localStorage.setItem('subs', JSON.stringify(item.children));
								}
							}
						}
					}
				})
				this.setBreadCrumbs(newValue)
				this.setTags(newValue);
			}
		},
		created() {
			this.setBreadCrumbs(this.$route)
			this.setTags(this.$route);
			// 监听关闭当前页面的标签页
			bus.$on('close_current_tags', () => {
				for (let i = 0, len = this.tagsList.length; i < len; i++) {
					const item = this.tagsList[i];
					if (item.path === this.$route.fullPath) {
						if (i < len - 1) {
							this.$router.push(this.tagsList[i + 1].path);
						} else if (i > 0) {
							this.$router.push(this.tagsList[i - 1].path);
						} else {
							this.$router.push('/');
						}
						this.tagsList.splice(i, 1);
						break;
					}
				}
			})
		}
	}
</script>


<style>
	.tags {
		margin-top: 8px;
		position: relative;
		height: 36px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;
	}

	.tags .tags-item {
		box-sizing: border-box;
		width: 60%;
		height: 100%;
		position: absolute;
		left: 0;
		display: flex;
		line-height: 36px;
	}

	.pos {
		line-height: 36px;
		margin-right: 10px;
		position: absolute;
		right: 10px;
	}

	.tags-li {
		list-style: none;
		cursor: pointer;
		vertical-align: middle;
		color: #595959;
		border-top: 1px solid #f0f0f0;
		border-right: 1px solid #f0f0f0;
		border-radius: 6px 6px 0 0;
		-webkit-transition: all .3s ease-in;
		-moz-transition: all .3s ease-in;
		transition: all .3s ease-in;
		padding-right: 10px;
		margin-right: 6px;
		border-left: 1px solid #f0f0f0;
		position: relative;
		display: flex;
		align-items: center;
	}

	.tags-li-title {
		float: left;
		padding: 0 0 0 20px;
		color: #595959;
		padding-right: 10px;

	}

	.tags-li.active {
		margin-bottom: -1px;
		background: #fff;
		margin-bottom: -1px;
	}

	.tags-li.active .tags-li-title,
	.tags-li.active {
		color: #2F80ED;
	}
</style>
